import { Button, Card, Form, List, Modal, Select } from "antd";
import { Config } from "./config";
import { Rule } from "./rules/types";
import { useState } from "react";
import EditParam from "./EditParam";
import { min_app_shell } from '@linksaas-minapp/api';


export interface RulePanelProps {
    config: Config;
    ruleList: Rule[];
    onChange: (config: Config) => void;
}

export default function RulePanel(props: RulePanelProps) {
    const [showModal, setShowModal] = useState(false);

    return (
        <Card title="规则列表" bordered={false} extra={
            <Button onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                setShowModal(true);
            }}>增加规则</Button>
        }>
            <List rowKey="id" dataSource={props.ruleList.filter(rule => props.config[rule.id] !== undefined)} renderItem={rule => (
                <Card title={rule.id} extra={
                    <Button onClick={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        const config = props.config;
                        delete config[rule.id];
                        props.onChange(config);
                    }}>删除规则</Button>
                }>
                    <p>{rule.descCn}</p>
                    <p>{rule.descEn}</p>
                    <Form>
                        <Form.Item label="规则状态">
                            <Select value={props.config[rule.id].Enabled} onChange={value => {
                                const config = props.config;
                                config[rule.id].Enabled = value;
                                props.onChange(config);
                            }}>
                                <Select value={true}>打开</Select>
                                <Select value={false}>关闭</Select>
                                <Select value="pending">待定(pending)</Select>
                            </Select>
                        </Form.Item>
                        {rule.paramList.map(param => (
                            <Form.Item key={param.param} label={param.param}>
                                <EditParam value={props.config[rule.id][param.param] === undefined ? param.defaultValue : props.config[rule.id][param.param]}
                                    defaultValue={param.defaultValue} demoValue={param.demoValue} optionList={param.optionList}
                                    validValue={param.validValue}
                                    onChange={value => {
                                        const config = props.config;
                                        config[rule.id][param.param] = value;
                                        props.onChange(config);
                                    }} />
                            </Form.Item>
                        ))}
                    </Form>
                </Card>
            )} />
            {showModal == true && (
                <Modal title="增加规则" open footer={null} bodyStyle={{ maxHeight: "calc(100vh - 200px)", overflowY: "auto" }}
                    onCancel={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setShowModal(false);
                    }}>
                    <List rowKey="id" dataSource={props.ruleList.filter(rule => props.config[rule.id] === undefined)} renderItem={rule => (
                        <List.Item key={rule.id}>
                            <Card title={rule.id} bordered={false} style={{ width: "100%" }} extra={
                                <Button type="link" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    const config = props.config;
                                    config[rule.id] = {
                                        Enabled: rule.enabled,
                                    };
                                    for (const param of rule.paramList) {
                                        config[rule.id][param.param] = param.defaultValue;
                                    }
                                    props.onChange(config);
                                    setShowModal(false);
                                }}>增加规则</Button>
                            }>
                                <p>{rule.descCn}</p>
                                <p>{rule.descEn}</p>
                                <div style={{ display: "flex", justifyContent: "flex-end", marginRight: "20px" }}>
                                    <a onClick={e => {
                                        e.stopPropagation();
                                        e.preventDefault();
                                        min_app_shell.openBrowser(rule.url);
                                    }}>查看详情</a>
                                </div>
                            </Card>
                        </List.Item>
                    )} />
                </Modal>
            )}
        </Card>
    );
}